<template>
    <div class="">
        <!-- 内容 -->
        <div class="detail-container">
            <div class="page-background"></div>
            <div class="course-detail">
                <!-- <div style="display: inline;" @click="goHome">首页</div> -->
                <router-link to="/" target="_blank" style="display: inline;color: #fff;text-decoration: none;">首页</router-link>
                <!-- >符号 -->
                <i aria-label="icon: right" class="anticon anticon-right">
                    <svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                        <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
                    </svg>
                </i>
                <span>视频详情</span>
            </div>
            <div class="detail-box">
                <!-- 课程介绍 -->
                <div class="course-introduce">
                    <div class="introduce-container">
                        <img src="" alt="" class="detail-bg">
                        <div class="introduce-inner">
                            <div class="collection">
                                <img src="" alt="">
                                <div >收藏</div>
                            </div>
                            <div class="video ant-col" id="fillImg">
                                <!-- 图片 -->
                                <img :src="courseDetail.bannerFileUrlPc" alt="">
                            </div>
                            <div class="ant-col course-text">
                                <li id="img-title">
                                    <header title="智慧狐智能棋具操作说明">{{ courseDetail.courseTitle }}</header>
                                </li>
                                <li>
                                    <span style="margin-right: 10px;font-size: 14px;" id="peopleNum">
                                        <span>累计{{ courseDetail.participationsCount }}人学习</span>
                                    </span>
                                    <!-- 黄星星 -->
                                    <ul tabindex="-1" role="radiogroup" class="ant-rate ant-rate-disabled">
                                        <li class="ant-rate-star ant-rate-star-full">
                                            <div role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0">
                                                <div class="ant-rate-star-first">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                                <div class="ant-rate-star-second">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="ant-rate-star ant-rate-star-full">
                                            <div role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0">
                                                <div class="ant-rate-star-first">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                                <div class="ant-rate-star-second">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="ant-rate-star ant-rate-star-full">
                                            <div role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0">
                                                <div class="ant-rate-star-first">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                                <div class="ant-rate-star-second">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="ant-rate-star ant-rate-star-full">
                                            <div role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0">
                                                <div class="ant-rate-star-first">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                                <div class="ant-rate-star-second">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="ant-rate-star ant-rate-star-full">
                                            <div role="radio" aria-checked="true" aria-posinset="5" aria-setsize="5" tabindex="0">
                                                <div class="ant-rate-star-first">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                                <div class="ant-rate-star-second">
                                                    <i aria-label="icon: star" class="anticon anticon-star">
                                                        <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                            <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                        </svg>
                                                    </i>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span style="color: rgb(0, 207, 140);" id="course-price">
                                        <!-- 课程价格 -->
                                        <div v-if="courseDetail">
                                            <div v-if="courseDetail.isFree === 1">免费</div>
                                            <div v-else-if="courseDetail.isDiscount === 1 && courseDetail.isFree === 0">
                                                <span class='red'>￥{{ courseDetail.discountPrice }} </span>
                                                <span class='old-price'> {{ courseDetail.coursePrice }} </span>
                                                <br>
                                                <span class='desc'>{{ courseDetail.discountDesc }}</span>
                                            </div>
                                            <div v-else>
                                                <div class='red'>￥{{ courseDetail.coursePrice }}</div>
                                            </div>
                                        </div>
                                    </span>
                                </li>
                                <!-- 功能按钮 -->
                                <li style="width: 750px;">
                                    <div >
                                        <button type="button" class="now-watch ant-btn ant-btn-primary">
                                            <span>立即观看</span>
                                        </button>
                                        <button type="button" class="join-shop-car ant-btn ant-btn-primary">
                                            <span>加入购物车</span>
                                        </button>
                                    </div>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 简介、目录、评论 -->
                <div class="course-info-tab">
                    <div class="tab-inner">
                        <!-- tab切换标题 -->
                        <ul class="tab-inner-title" >
                            <li class="nav-item">
                                <!-- 简介 -->
                                <div 
                                    class="nav-link" 
                                    :class="{ active: activeTab === 'home1' }" 
                                    @click.prevent="activeTab = 'home1'"
                                    :style="{ border: 'none', 'border-bottom': activeTab === 'home1' ? '2px solid #00cf8c' : 'none' }">
                                    课程描述
                                </div>
                            </li>
                            <li class="nav-item">
                                <!-- 目录 -->
                                <div class="nav-link" :class="{ active: activeTab === 'menu11' }" 
                                    @click.prevent="activeTab = 'menu11'"
                                    style="border: none;">
                                    目录
                                </div>
                            </li>
                            <li class="nav-item">
                                <!-- 评论 -->
                                <div 
                                    class="nav-link" 
                                    :class="{ active: activeTab === 'menu2' }" 
                                    @click.prevent="activeTab = 'menu2'"
                                    style="border: none;">
                                    评论
                                </div>
                            </li>
                        </ul> 
                        <!-- tab切换内容 -->
                        <div class="tab-content tab-content2">
                            <!-- 简介详情 -->
                            <div class="tab-pane container" v-if="activeTab === 'home1'" v-html="courseDetail.courseDetail"></div>
                            <!-- 目录详情 -->
                            <div class="tab-pane container" v-if="activeTab === 'menu11'">
                                <div class="course-section" v-if="courseDetail && courseDetail.sections">
                                    <div v-for="(item,sectionIndex) in courseDetail.sections" :key="sectionIndex" class="mulu">
                                        <h3>{{ sectionIndex + 1 }}. {{ item.sectionName }}
                                            <button style="float:right;border:none;">
                                                <img src='@/assets/下载.png' style="width:100px;height:30px;">
                                            </button>
                                        </h3>
                                        <div :class="'sectionName' + sectionIndex">
                                            <div v-for="(subItem, index) in item.subSections" :key="index">
                                                {{ subItem.sectionName }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 评论详情 -->
                            <div class="tab-pane container" v-if="activeTab === 'menu2'">
                                <div class="course-bottom">
                                    <div>
                                        <div>评论<br>
                                            <ul tabindex="0" role="radiogroup" class="ant-rate" style="margin: 10px 0px;">
                                                <li class="ant-rate-star ant-rate-star-full">
                                                    <div role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0">
                                                        <div class="ant-rate-star-first"><i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                    <div class="ant-rate-star-second">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="ant-rate-star ant-rate-star-full">
                                                <div role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0">
                                                    <div class="ant-rate-star-first">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                    <div class="ant-rate-star-second">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="ant-rate-star ant-rate-star-full">
                                                <div role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0">
                                                    <div class="ant-rate-star-first">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                    <div class="ant-rate-star-second">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="ant-rate-star ant-rate-star-full">
                                                <div role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0">
                                                    <div class="ant-rate-star-first">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                    <div class="ant-rate-star-second">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="ant-rate-star ant-rate-star-full">
                                                <div role="radio" aria-checked="true" aria-posinset="5" aria-setsize="5" tabindex="0">
                                                    <div class="ant-rate-star-first">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                                                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                    <div class="ant-rate-star-second">
                                                        <i aria-label="icon: star" class="anticon anticon-star">
                                                            <svg viewBox="64 64 896 896" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                </div>
                                            </li>
                                            </ul>
                                            <span class="ant-rate-text">非常好</span>
                                        </div>
                                    </div>
                                    <div >
                                        <textarea placeholder="请发表您对课程的评价" class="ant-input" style="height: 135.6px; min-height: 135.6px; max-height: 135.6px; overflow-y: hidden;"></textarea>
                                        <button type="button" class="ant-btn ant-btn-primary" style="float: right; margin: 20px 0px 0px;height: 32px;padding: 0 15px; font-size: 14px;">
                                            <span>发表评论</span>
                                        </button>
                                        <div style="clear: both;"></div>
                                    </div>
                                    <hr data-v-102cd5c7="" style="margin: 20px 0px; height: 1px; border: 0px; background-color: rgb(232, 232, 232); color: rgb(232, 232, 232);">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCourseDetail } from '@/api/request';

export default {
    data() {
        return {
            courseDetail: [],
            activeTab: 'home1',

        };
    },
    methods: {
        goHome(){
            this.$router.push({ path: '/' });
        }
    },
    beforeCreate(){},
    created() {
       const courseId = this.$route.params.courseId; // 获取路由参数中的课程ID
    //    this.fetchCourseDetail(courseId);
       getCourseDetail(courseId).then(res => {
            console.log(res.data);
            this.courseDetail = res.data;
       })

    },
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {}
};
</script>
<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul,li{
    list-style: none;
}
// 星星
.ant-rate {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: #fadb14;
    font-size: 20px;
    line-height: unset;
    list-style: none;
    outline: none;
    .ant-rate-star {
        margin-right: 8px;
        position: relative;
        display: inline-block;
        padding: 0;
        color: inherit;
        cursor: default;
        transition: all .3s;
        .ant-rate-star-first {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
        }
    }
}
.ant-btn-primary {
    color: #fff;
    background-color: #00cf8c;
    border-color: #00cf8c;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
}
// 课程详情
.detail-container {
    padding-bottom: 40px;
    .page-background {
        position: fixed;
        z-index: -100;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f4f4f4;
    }
    .course-detail {
        font-size: 16px;
        padding: 20px 0 15px 20px;
        margin: auto;
        color: #fff;
        width: 1200px;
        height: 164px;
        background-size: 100%;
        background: linear-gradient(90deg, #5782f6, #4683ff);
        box-shadow: 0 8px 10px 0 rgba(40, 113, 234, .1);
        .anticon {
            display: inline-block;
            color: inherit;
            font-style: normal;
            line-height: 0;
            text-align: center;
            text-transform: none;
            vertical-align: -.125em;
        }
    }
    .detail-box {
        width: 1160px;
        margin: auto;
        .course-introduce {
            margin-top: -100px;
            .introduce-container{
                width: 100%;
                position: relative;
                background: #fff;
                border-radius: 4px;
                .detail-bg {
                    position: absolute;
                    top: 0;
                    left: calc(50% - 114px);
                }
                .introduce-inner {
                    z-index: 1;
                    padding: 20px;
                    margin: 10px 0;
                    font-size: 24px;
                    overflow: hidden;
                    .collection {
                        cursor: pointer;
                        width: 110px;
                        height: 30px;
                        font-size: 16px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        float: right;
                        color: #999;
                        position: absolute;
                        right: 30px;
                        top: 30px;
                        >img {
                            width: 18px;
                            height: 18px;
                            margin-bottom: 4px;
                        }
                    }
                    .ant-col {
                        position: relative;
                        padding-right: 0;
                        padding-left: 0;
                        float: left;
                    }
                    .video{
                        display: block;
                        box-sizing: border-box;
                        width: 33.33333333%;
                        >img {
                            width: 330px;
                            height: 220px;
                            border-radius: 12px;
                        }
                    }
                    .course-text {
                        display: block;
                        box-sizing: border-box;
                        width: 58.33333333%;
                        .red {
                            color: #ff4500;
                            font-weight: 500px;
                        }
                        .old-price {
                            color: #999;
                            text-decoration: line-through;
                            font-size: 12px;
                        }
                        .desc {
                            // float: right;
                            color: #fa8c16!important;
                            background: #fff7e6;
                            border: 1px solid #d9d9d9;
                            border-color: #ffd591;
                            padding: 0 7px;
                            margin-right: 8px;
                            font-size: 12px;
                            line-height: 20px;
                        }
                        >li{
                            margin: 10px 0;
                            font-size: 24px;
                            >header {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: 30px;
                                font-weight: 500;
                                color: #333;
                            }
                        }
                        >li:nth-of-type(2) {
                            // font-size: 14px;
                            color: #999;
                            
                        }
                        >li:nth-of-type(3) {
                            height: 70px;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            :first-child {
                                font-size: 26px;
                                font-weight: 600;
                            }
                        }
                        >li:nth-of-type(4) {
                            .now-watch{
                                width: 121px;
                                height: 40px;
                                border: none;
                                font-size: 18px;
                                border-radius: 24px;
                                margin-right: 15px;
                            } 
                            .join-shop-car{
                                width: 121px;
                                height: 40px;
                                background: #ffe9e9;
                                border-radius: 24px;
                                font-size: 18px;
                                font-weight: 500;
                                color: #f1534b;
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
/* 简介，目录，评论 */
.course-info-tab{
    margin-top: 20px;
    border-radius: 3px;
    width: 100%;
    background: #fff;
    .tab-inner {
        padding: 10px;
        .tab-inner-title {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #f0f0f0;
            >li {
                width: 100px;
                text-align: center;
                a {
                    color: rgba(0, 0, 0, .65);
                    &:hover {
                        color: #00cf8c;
                        border-bottom: 2px solid #00cf8c!important;
                    }
                }
            }
        }
        .tab-content2 {
            font-size: 15px;
            line-height: 1.5;
            >div {
                padding:10px 30px;
            }
            .home1>span {
                color: rgba(0, 0, 0, .65);
                font-size: 14px;
                line-height: 1.5;
                p {
                    margin-bottom: 0;
                }
            }
        }
        .course-bottom {
            padding: 30px;
            textarea.ant-input {
                max-width: 100%;
                line-height: 1.5;
                vertical-align: bottom;
                transition: all .3s, height 0s;
            }
            .ant-input {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                list-style: none;
                position: relative;
                display: inline-block;
                width: 100%;
                height: 32px;
                padding: 4px 11px;
                color: rgba(0, 0, 0, .65);
                font-size: 14px;
                line-height: 1.5;
                background-color: #fff;
                background-image: none;
                border: 1px solid #d9d9d9;
                border-radius: 2px;
                transition: all .3s;
            }
        }
        .course-section {
            .mulu {
                >h3 {
                    font-size: 22px;
                    padding: 5px 0 5px 10px;
                }
                >div>div {
                    // height: 30px;
                    line-height: 30px;
                    padding: 10px 20px;
                    background: #f2f2f2;
                    margin: 10px 0;
                }
            }
        }
    }
}
</style>